
/* ==================
         聊天
 ==================== */

.tien-chat {
  display: flex;
  flex-direction: column;
}

.tien-chat .tien-item {
  display: flex;
  padding: 15px 15px 35px;
  position: relative;
}

.tien-chat .tien-item>.tien-avatar {
  width: 40px;
  height: 40px;
}

.tien-chat .tien-item>.main {
  max-width: calc(100% - 130px);
  margin: 0 20px;
  display: flex;
  align-items: center;
}

.tien-chat .tien-item>image {
  height: 160px;
}

.tien-chat .tien-item>.main .content {
  padding: 10px;
  border-radius: 3px;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  font-size: 15px;
  position: relative;
  min-height: 40px;
  line-height: 20px;
  text-align: left;
}

.tien-chat .tien-item>.main .content:not([class*="bg-"]) {
  background: #fff;
  color: #666;
}

.tien-chat .tien-item .date {
  position: absolute;
  font-size: 12px;
  color: #aaa;
  width: calc(100% - 160px);
  bottom: 10px;
  left: 80px;
}

.tien-chat .tien-item .action {
  padding: 0 15px;
  display: flex;
  align-items: center;
}

.tien-chat .tien-item>.main .content::after {
  content: "";
  top: 13.5px;
  transform: rotate(45deg);
  position: absolute;
  z-index: 100;
  display: inline-block;
  overflow: hidden;
  width: 12px;
  height: 12px;
  left: -6px;
  right: initial;
  background-color: inherit;
}

.tien-chat .tien-item.self>.main .content::after {
  left: auto;
  right: -6px;
}

.tien-chat .tien-item>.main .content::before {
  content: "";
  top: 15px;
  transform: rotate(45deg);
  position: absolute;
  z-index: -1;
  display: inline-block;
  overflow: hidden;
  width: 12px;
  height: 12px;
  left: -6px;
  right: initial;
  background-color: inherit;
  filter: blur(2.5px);
  opacity: 0.3;
}

.tien-chat .tien-item>.main .content:not([class*="bg-"])::before {
  background-color: #333;
  opacity: 0.1;
}

.tien-chat .tien-item.self>.main .content::before {
  left: auto;
  right: -6px;
}

.tien-chat .tien-item.self {
  justify-content: flex-end;
  text-align: right;
}

.tien-chat .tien-info {
  display: inline-block;
  margin: 10px auto;
  font-size: 12px;
  padding: 4px 6px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  color: #fff;
  max-width: 200px;
  line-height: 1.4;
}
